<template>
	<view class="my">
		<!-- 我的 -->
		<view class="my-nav">
			<!-- 头部 -->
			<view class="myNavContent" @tap="inredeem(0)">
				<view class="my-avatar">
					<image :src="userinfo.avatar" mode=""></image>
				</view>
				<view class="my-userinfo">
					<view class="my-nickName">{{userinfo.nickname}}</view>
					<view class="my-coins">当前回收币：{{userinfo.balance}}</view>
				</view>
				<!-- <view class="withdrawal">
					<view @xtap="withdrawal" class="withdrawal-text">提现</view>
				</view> -->
			</view>
		</view>
		<!-- 累计回收币/累计下单 -->
		<view class="accumulate">
			<view class="accumulate-box">
				<!-- 累计回收币 -->
				<view class="accumulate-order">
					<view class="accumulateCount">{{userinfo.allBalance}}</view>
					<view class="accumulateText">累计回收币</view>
				</view>
				<!-- 累计下单 -->
				<view class="accumulate-order">
					<view class="accumulateCount">0</view>
					<view class="accumulateText">累计下单</view>
				</view>
			</view>
		</view>
		<!-- 内容部分 -->
		<view class="my-content">
			<view class="myContent-title">
				<text>回收订单</text>
			</view>
			<view class="content">
				<view class="content-icon" :class="index===3?'boxEnd':'boxbefor'" v-for="(item,index) in orderList" :key="index" @tap="inrecycling(item.id)">
					<view class="icon iconfont" :class="item.icon"></view>
					<view class="contentText">{{item.text}}</view>
				</view>
			</view>
		</view>
		<!-- 兑换订单 -->
		<!-- <view class="my-content">
			<view class="myContent-title">
				<text>兑换订单</text>
			</view>
			<view class="content">
				<view class="content-icon" @tap="inredeem(0)">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/delivered@3x.png" mode=""></image>
					</view>
					<view class="contentText">待发货</view>
				</view>
				<view class="content-icon" @tap="inredeem(1)">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/received@3x.png" mode=""></image>
					</view>
					<view class="contentText">待收货</view>
				</view>
				<view class="content-icon" @tap="inredeem(2)">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/order-completed@3x.png" mode=""></image>
					</view>
					<view class="contentText">已完成</view>
				</view>
				<view class="content-icon"></view>
			</view>
		</view> -->
		<!-- 更多服务 -->
		<view class="my-content">
			<view class="myContent-title">
				<text>更多服务</text>
			</view>
			<view class="content">
				
				<button class="content-icon" plain="true" v-if="userinfo.telphone==''" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my1.png" mode=""></image>
					</view>
					<view class="contentText">回收员中心</view>
				</button>
				<view class="content-icon" v-else @tap="recyclerCenter">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my1.png" mode=""></image>
					</view>
					<view class="contentText">回收员中心</view>
				</view>
				<view class="content-icon" @tap="cityRecycle">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my2.png" mode=""></image>
					</view>
					<view class="contentText">城市回收站</view>
				</view>
				<!-- <view class="content-icon">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my3.png" mode=""></image>
					</view>
					<view class="contentText">城市合伙人</view>
				</view> -->
				<view class="content-icon" @tap="inAddress">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my5.png" mode=""></image>
					</view>
					<view class="contentText">地址管理</view>
				</view>
				<view class="content-icon" @tap="inPersonal">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my6.png" mode=""></image>
					</view>
					<view class="contentText">个人信息</view>
				</view>
				<view class="content-icon" @tap="inauthLogin">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my7.png" mode=""></image>
					</view>
					<view class="contentText">管理员登录</view>
				</view>
				<view class="content-icon" @tap="inAboutUs">
					<view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my8.png" mode=""></image>
					</view>
					<view class="contentText">关于我们</view>
				</view>
				<view class="content-icon promotion" @tap="inspread">
					<!-- <view class="content-img">
						<image src="https://huishou.68699.cn/addons/wjyk_recycle/public/static/index/my4.png" mode=""></image>
					</view> -->
					<view class="promotionText">推广赚钱</view>
				</view>
				<view class="content-icon"></view>
			</view>
		</view>
		<!-- tabbar -->
		<tabBar currentPage="my"></tabBar>
	</view>
</template>

<script>
	import tabBar from "@/component/commen/tabbar.vue"//引入底部组件
	import util from '@/component/commen/api/util.js';
	export default {
		components:{
			tabBar
		},
		data() {
			return {
				userinfo:"",//用户信息
				orderList:[
					{
						id:1,
						icon:"icon-yuyue",
						text:"已预约"
					},{
						id:2,
						icon:"icon-jiedan",
						text:"已接单"
					},{
						id:3,
						icon:"icon-yiwancheng",
						text:"已完成"
					},
					// {
					// 	id:4,
					// 	icon:"icon-rili",
					// 	text:"定期回收"
					// }
				],
				userPhone:"",//获取用户手机号
			};
		},
		onShow() {
			this.getUserinfo()
		},
		methods:{
			getUserinfo(){//获取用户信息
				var params = {
					do:"user",
					uid:uni.getStorageSync("uid")
				}
				util.requestWithSign(params).then(res=>{
					console.log("我的信息数据：",res)
					this.userinfo = res.data
					// 存储回收员id
					uni.setStorageSync("collectorid",res.data.collectorid)
				})
			},
			withdrawal(){//点击提现按钮
				uni.navigateTo({
					url:"/otherPages/cash/cash"
				})
			},
			recyclerCenter(){//点击回收员中心
				console.log(this.userinfo)
				if(this.userinfo.collectorstatus==2){//已经成为回收员1：审核中；2:已通过
					uni.setStorageSync("collectorid",this.userinfo.collectorid)
					uni.navigateTo({
						url:"/otherPages/recyclerCenter/recyclerCenter"
					})
				}else{
					uni.showToast({
						title:"暂无权限！",
						icon:"none"
					})
				}
				// uni.navigateTo({
				// 	url:"/otherPages/recyclerCenter/recyclerCenter"
				// })
			},
			getPhoneNumber(e){//点击回收员中心获取手机号
				var _this = this
				console.log("获取的手机号",e)
				uni.request({
					url: 'https://api.weixin.qq.com/cgi-bin/stable_token',
					method: 'POST',
					data: {
						appid: 'wx9dcc19f581f44941',
						secret: '32c9bf58620b5f09c38c6fcb35b0ddef',
						grant_type: 'client_credential'
					},
					success(res) {
						console.log('获取access_token信息：', res)
						// 保存access_token的操作
						// _this.accessToken = res.data.access_token
						uni.request({
							url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${res.data.access_token}`,
							method: 'POST',
							data: {
								code: e.detail.code
								// openid: _this.openid (openid非必填，所以不需要先获取用户信息，再获取手机号)
							},
							success(res) {
								console.log('获取的用户手机号userPhone：', res.data.phone_info)
								// uni.setStorageSync("userPhone",res.data.phone_info.purePhoneNumber)
								_this.userPhone = res.data.phone_info.purePhoneNumber
								_this.pushPhone()
							}
						})
					}
				})
			},
			pushPhone(){//添加手机号
				var paramupdate = {
					do:"settelphone",
					op:"resiger",
					pid:"",
					openid:uni.getStorageSync("openid"),
					uid:uni.getStorageSync("uid"),
					telphone:this.userPhone,
				}
				util.requestWithSign(paramupdate).then(res=>{
					console.log("添加手机号：",res)
					// uni.redirectTo({
					// 	url: "/pages/my/my"
					// })
					this.getUserinfo()
					this.recyclerCenter()
				})
			},
			inredeem(e){//点击跳转至兑换中心页面
				uni.navigateTo({
					url:`/otherPages/redeem-order/redeem-order?tabbarIndex=${e}`
				})
			},
			inrecycling(e){//点击跳转至回收订单页面
				if(e!=4){//如果是定期回收则重新跳转至定期回收页面
					uni.navigateTo({
						url:`/otherPages/recycling-orders/recycling-orders?tabbarIndex=${e}`
					})
				}else{
					
				}
			},
			inAddress(){//点击地址管理
				uni.navigateTo({
					url:"/otherPages/address-management/address-management"
				})
			},
			inPersonal(){//点击个人中心
				uni.navigateTo({
					url:"/otherPages/personal/personal"
				})
			},
			inauthLogin(){//点击管理员登录
				if(uni.getStorageInfoSync("isauthLogin")){//登录过
					uni.navigateTo({//跳转到平台统计
						url:"/otherPages/review/review"
					})
				}else{//本地没有登录过，跳转到管理员登录页面
					uni.navigateTo({
						url:"/otherPages/authLogin/authLogin"
					})
				}
			},
			inspread(){//点击推广中心
				uni.navigateTo({
					url:"/otherPages/spread/spread"
				})
			},
			cityRecycle(){//点击城市回收站
				uni.navigateTo({
					url:"/otherPages/cityRecycleLogin/cityRecycleLogin"
				})
			},
			inAboutUs(){//点击关于我们
				uni.navigateTo({
					url:"/otherPages/aboutUs/aboutUs"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.my{
		padding-bottom: 150rpx;
		font-size: 29rpx;
		// 头部我的信息
		.my-nav{
			width: 100%;
			height: 300rpx;
			// border: 1px solid #000;
			background: url("https://huishou.68699.cn/addons/wjyk_recycle/public/images/user-background.png") no-repeat;
			background-size: 100%;
			padding: 50rpx 40rpx;
			box-sizing: border-box;
			.myNavContent{
				display: flex;
				align-items: center;
				.my-avatar{
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.my-userinfo{
					.my-nickName{
						font-weight: bold;
					}
					.my-coins{
						font-size: 27rpx;
						margin-top: 9rpx;
						color: #737373;
					}
				}
				.withdrawal{
					// border: 1px solid #000;
					flex: 1;
					font-size: 28rpx;
					.withdrawal-text{
						margin-left: auto;
						// border: 1px solid #f00;
						background: #00b287;
						width: 35%;
						color: #fff;
						text-align: center;
						padding: 9rpx 0;
						border-radius: 20rpx;
					}
				}
			}
		}
		// 累计回收币/累计下单
		.accumulate{
			// border: 1px solid #f00;
			margin-top: -80rpx;
			width: 100%;
			// height: 10vh;
			.accumulate-box{
				text-align: center;
				padding: 30rpx 130rpx;
				box-sizing: border-box;
				width: 95%;
				height: 100%;
				background: #fff;
				margin: 0 auto;
				border-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				.accumulate-order{
					// border: 1px solid #f00;
					font-size: 28rpx;
					.accumulateText{
						margin-top: 10rpx;
					}
				}
			}
		}
		// 主体内容部分
		.my-content{
			margin-top: 20rpx;
			background: #fff;
			padding: 40rpx 0;
			.myContent-title{
				font-weight: bold;
				font-size: 28rpx;
				
				// border: 1px solid #000;
				padding: 0 30rpx 20rpx 30rpx;
				border-bottom: 2rpx solid #e5e5e5;
			}
			.content{
				// margin-top: 2vh;
				padding: 0 30rpx;
				// border: 1px solid #f00;
				display: flex;
				// justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				button{
					padding: 0;
					border: 0;
				}
				.content-icon{
					// margin: 0 auto;
					text-align: center;
					margin-top: 40rpx;
					width: 24%;
					// border: 1px solid #f00;
					.iconfont{
						font-size: 63rpx;
					}
					.contentText{
						margin-top: 10rpx;
						font-size: 27rpx;
					}
					.content-img{
						width: 55rpx;
						height: 55rpx;
						margin: 0 auto;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
				// .promotion2{
				// 	flex:2;
				// }
				.promotion{
					// flex: 2;
					width: 50%;
					// margin-left: 40rpx;
					// flex: 2;
					// border: 1px solid #000;
					// .content-img{
					// 	width: 100rpx;
					// 	height: 100rpx;
						
					// }
				}
				.promotionText{
					background: #00b287;
					color: #fff;
					height: 80rpx;
					width: 80%;
					font-size: 34rpx;
					border-radius: 30rpx;
					line-height: 80rpx;
				}
				.boxEnd{
					// font-weight: bold;
					// border: 2rpx solid #f00;
					border-left:2rpx solid #cfcfcf;
				}
				.boxbefor{
					color: #737373;
				}
			}
		}
	}
</style>
